<template>
  <div class="p-2 container">
    <!-- 详情巡视任务对话框 -->
    <el-descriptions :column='2' class="descriptions">
      <el-descriptions-item label="任务名称" width="50%" > {{ form.patrolTaskName || '- -' }} </el-descriptions-item>
      <el-descriptions-item label="执行时间" width="50%" > {{ form.executionStartTime }} ~ {{ form.executionEndTime }} </el-descriptions-item>
      <el-descriptions-item label="任务周期" width="50%" :span='2'>
         {{ parseTime( form.startTime, '{y}-{m}-{d}') }} ~ {{ parseTime(form.endTime, '{y}-{m}-{d}') }}
         <div style="margin-left: 120px;">
          <el-checkbox v-model="form.mondayFlag" label="星期一" value="0" disabled/>
          <el-checkbox v-model="form.tuesdayFlag" label="星期二" value="0" disabled/>
          <el-checkbox v-model="form.wednesdayFlag" label="星期三" value="0" disabled/>
          <el-checkbox v-model="form.thursdayFlag" label="星期四" value="0" disabled/>
          <el-checkbox v-model="form.fridayFlag" label="星期五" value="0" disabled/>
          <el-checkbox v-model="form.saturdayFlag" label="星期六" value="0" disabled/>
          <el-checkbox v-model="form.sundayFlag" label="星期日" value="0" disabled/>
         </div>
      </el-descriptions-item>
      <el-descriptions-item label="执行人" width="50%"> {{ form.executeUserName || '- -' }} </el-descriptions-item>
      <el-descriptions-item label="任务状态" width="50%">
        <dict-tag :options="camera_patrol_task_status" :value="form.cameraPatrolTaskStatus" style="display: inline-block;"/>
      </el-descriptions-item>
      <el-descriptions-item label="是否要求打卡" width="50%" :span="2">
        <dict-tag :options="clock_flag" :value="form.clockFlag" style="display: inline-block;"/>
      </el-descriptions-item>
      <el-descriptions-item label="备注" width="50%" :span="2"> {{ form.remark || '- -' }} </el-descriptions-item>
      <el-descriptions-item label="巡视路线" width="50%" :span="2">
        <span>{{ form.patrolRouteName }}</span>
        <el-table v-loading="loading" :data="cameraList" height="calc(100vh - 380px)">
            <el-table-column label="设备编号" align="center" prop="equipmentCode" />
            <el-table-column label="监控设备名称" align="center" prop="equipmentName" />
            <el-table-column label="设备位置" align="center" prop="cameraGroupName" >
              <template #default="scope">
                {{ getParkPositionStr(scope.row.parkBuildingName, scope.row.parkBuildingAreaName, scope.row.parkBuildingFloorName, scope.row.parkBuildingRoomName) }}
              </template>
            </el-table-column>
          </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup name="cameraPatrolTask" lang="ts">
import { getcameraPatrolTask } from '@/api/security/video-patrol/camera-patrol-task';
import { listUser } from '@/api/system/user';
import { getParkPositionStr } from '@/utils/parkUtil';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { camera_patrol_task_status, clock_flag } = toRefs<any>(proxy?.useDict('camera_patrol_task_status', 'clock_flag'));

const loading = ref(true);
const cameraPatrolTaskFormRef = ref<ElFormInstance>();

const data = reactive<any>({
  form: {
    cameraPatrolTaskId: undefined,
    remark: undefined,
    patrolTaskName: undefined,
    executeRoleId: undefined
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    patrolTaskName: undefined,
    executeRoleId: undefined,
    startAndEnd: undefined,
    params: {
    }
  },
  rules: { }
});

const { queryParams, form, rules } = toRefs(data);

const emit = defineEmits(['close', 'success']);
const props = defineProps({
  cameraPatrolTaskId: {
    type: String,
    default: null,
    required: true
  }
});

/** 日期框改变 */
let startAndEndAdd = ref([])
const handleDateChangeAdd = () =>{
  form.value.startTime = startAndEndAdd.value[0]
  form.value.endTime = startAndEndAdd.value[1]
  console.log('form.value', form.value)
  form.value.startAndEndAdd = startAndEndAdd
}

/** 日期框改变 */
let startAndEndTimeAdd = ref([])
const handleDateChangeTimeAdd = () =>{
  console.log('startAndEndTimeAdd', startAndEndTimeAdd.value)
  form.value.executionStartTime = startAndEndTimeAdd.value[0]
  form.value.executionEndTime = startAndEndTimeAdd.value[1]
  console.log('form.value', form.value)
  form.value.startAndEndTimeAdd = startAndEndTimeAdd
}

/** 详情 */
const cameraPatrolTaskInfo = async(row) =>{
  getExecuteUserList()
  const res = await getcameraPatrolTask(props.cameraPatrolTaskId).finally(() => { loading.value = false; });
  console.log('获取详情：', res)

  Object.assign(form.value, res.data);
  startAndEndAdd.value = []
  startAndEndAdd.value.push(res.data.startTime)
  startAndEndAdd.value.push(res.data.endTime)
  form.value.startAndEndTimeAdd = []
  form.value.startAndEndTimeAdd.push(res.data.executionStartTime)
  form.value.startAndEndTimeAdd.push(res.data.executionEndTime)
  Object.assign(form.value, res.data);
  form.value.fridayFlag = form.value.fridayFlag == '0';
  form.value.mondayFlag = form.value.mondayFlag === '0';
  form.value.sundayFlag = form.value.sundayFlag === '0';
  form.value.tuesdayFlag = form.value.tuesdayFlag === '0';
  form.value.saturdayFlag = form.value.saturdayFlag === '0';
  form.value.thursdayFlag = form.value.thursdayFlag === '0';
  form.value.wednesdayFlag = form.value.wednesdayFlag === '0';
  cameraList.value = res.data.cameraPatrolRouteCameraEquipmentVOList
}
let cameraList = ref([])

/** 执行用户 */
let optionsExcuteUserList = ref([])
const getExecuteUserList = async()=>{
  const res = await listUser()
  console.log('获取执行人：', res)
  optionsExcuteUserList.value = res.rows
}

onMounted(() => {
  cameraPatrolTaskInfo(props.cameraPatrolTaskId)
});
</script>
<style lang="scss" scoped>
.descriptions{
  margin:10px 0;
}
::v-deep .el-descriptions__label{
  width: 100px;
  display: inline-block;
  text-align: right;
  color: #7f7f7f;
}
::v-deep .el-descriptions__content {
  color: black;
}
:deep(.el-card__header) {
    height: 60px;
}
:deep(.el-card__body) {
    height: calc(100% - 60px);
}
:deep(.pagination-container) {
    margin-top: 0;
}
::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
  display: none;
}
</style>
